<template>
    <div>
        <Nav :title="title"></Nav>
        <div class="content">
            <van-form @submit="onSubmit">
                <van-field
                    v-model="username"
                    name="username"
                    label="用户名"
                    placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]"
                />
                <van-field
                    v-model="password"
                    type="password"
                    name="pwd"
                    label="密码"
                    placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
                />
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">提交</van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script>
    export default {
      data() {
        return {
            title:'用户登录',
            username: '',
            password: '',
        };
    },
    methods: {
        onSubmit(values) {
            var username = values.username
            this.$store.commit('setState',username)
            this.$http.post(`login`,values).then(()=>{
                this.$router.push('/home')
            })
        },
    },  
    }
</script>

<style scoped>
.content{
    margin-top: 90px;
}
.van-form{
    margin-top: 100px;
    height: 600px;
}
.van-cell{
    height: 120px;
    font-size: 35px;
    line-height: 120px;
}
.van-button{
    font-size: 35px;
    height: 85px;
    margin-top: 20px;
}
</style>